import React, { useEffect, useState } from 'react'
import './myscss/Order_details.scss'
import { Tabs } from 'react-vant';
import { useNavigate } from 'react-router-dom'
import { sleep } from 'antd-mobile/es/utils/sleep'
import { InfiniteScroll, List } from 'antd-mobile'
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000'
export default function Order_details() {
  let navigate = useNavigate()


  //实现触底加载
  const [fans, setData] = useState([])
  const [hasMore, setHasMore] = useState(true)
  const [page, setPage] = useState(1)
  async function loadMore() {
    const append = await axios.get('/zjl_getfans', { params: { current: page, pagesize: 5 } }).then(async (res) => {
      await sleep(2000)
      let { data: { fans } } = res
      return fans
    })
    setPage(page + 1)
    setData(val => [...val, ...append])
    setHasMore(append.length > 0)
  }
  let getId=async(id)=>{
    let {data}=await axios.post('/get_id',{id})
    navigate('/MinPage/Order_page?id='+id)
  }
  useEffect(() => {
 
  }, [])
  return (
    <div id='Order_details'>
      <div className='fans_length'>
        <b onClick={() => { navigate('/MinPage/Income') }}>&lt;</b><span>订单明细</span>
      </div>
      <hr />
      <Tabs active="active">
        <Tabs.TabPane title="问诊">
         <List>
         {
            fans.map((item, index) => (
              <div className="li" key={item._id} onClick={()=>{getId(item._id)}}>
                <div className="ding">
                  <p>订单编号:{item._id}</p>
                  <p>已完成</p>
                </div>
                <hr />
                <div className="ding2">
                  <div>

                    <h3>{item.name}</h3>
                    <span>{item.gender}</span>
                    <span>{item.age}</span>
                    <span>图文问诊</span>
                  </div>

                  <div>
                    <h2>{item.age}</h2>
                  </div>

                </div>
                <div>
                  <p>2022-10-10</p>
                </div>
              </div>
            ))
          }
         </List>
         <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
        </Tabs.TabPane>
        <Tabs.TabPane title="挂号">
        <List>
         {
            fans.map((item, index) => (
              <div className="li" key={item._id} onClick={()=>{getId(item._id)}}>
                <div className="ding">
                  <p>订单编号:{item._id}</p>
                  <p>已完成</p>
                </div>
                <hr />
                <div className="ding2">
                  <div>

                    <h3>{item.name}</h3>
                    <span>{item.gender}</span>
                    <span>{item.age}</span>
                    <span>专家号</span>
                  </div>

                  <div>
                    <h2>{item.age}</h2>
                  </div>

                </div>
                <div>
                  <p>2022-10-10</p>
                </div>
              </div>
            ))
          }
         </List>
         <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
        </Tabs.TabPane>
        <Tabs.TabPane title="开药">
        <List>
         {
            fans.map((item, index) => (
              <div className="li" key={item._id} onClick={()=>{getId(item._id)}}>
                <div className="ding">
                  <p>订单编号:{item._id}</p>
                  <p>已完成</p>
                </div>
                <hr />
                <div className="ding2">
                  <div>

                    <h3>{item.name}</h3>
                    <span>{item.gender}</span>
                    <span>{item.age}</span>
                  </div>

                  <div>
                    <h2>{item.age}</h2>
                  </div>

                </div>
                <div>
                  <p>2022-10-10</p>
                </div>
              </div>
            ))
          }
         </List>
         <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
        </Tabs.TabPane>
      </Tabs>

    </div>
  )
}
